<script setup>
import {onPageScroll, onShow} from "@dcloudio/uni-app";
import Banner from "./components/banner.vue";
import {useMe} from "./use_me";
import {BaseImgUrl, IsDevelopment, BaseURL} from "../../utils/lshttp";
import {calculateDateDifferenceFun, countDownFun} from "../../utils/date";
import {useCashout} from "../cashout/use_cashout";
import LszbgUniCountDown from "../../components/LszbgUniCountDown.vue";
import CacheImage from "../../components/CacheImage.vue";
import {getBuToPagePath} from "../../utils/utils";
const {
  okTiXian,
} = useCashout()
const {
  headerBoxHeight, // header_box高度
  user,
  newUser, // 新用户
  mtAppId, // 小程序id
  mtOrderUrl, // 小程序订单页面
  // vipIcon,
  memberStyle, //会员等级style
  banners,
  firstOrderBanner, // 首单补贴banner
  navMenu,
  userInfoStore,
  commonInfoStore,
  isShowBindPhone, // 是否显示绑定手机号
  isShowOrderNum, // 是否显示复制订单号弹窗
  orderNoItem, // 订单号item
  orderNoVal, // 订单号
  menuRightWidth, // 右侧胶囊宽度
  msgList, // 系统消息
  navList, // 中间导航菜单
  orderTabList, // 我的订单tab
  orderProgressLists, // 进行中订单数据
  challengeList, // 挑战赛数据列表
  memberLists, // 获取团员数据列表
  scHeight, // 页面滚动高度
  redBagLists, // 红包数据列表
  isShowjoinLeague,// 入团弹窗
  temCode, // 邀请码
  user_login,
  pageUrl,
  toVip, // 查看会员
  toIndex, // 去首页下单，开通会员，升级会员
  handleUpdateAvatar,
  handleBindPhone,
  pageNavUrl,
  // gotuMeituanPage,
  goToBindPhone, // 跳转绑定手机号,领取会员
  toMsg, // 系统消息事件
  goToPage, // 跳转中间导航页面
  goGFShop, // 跳转美团官返店铺
  goGFPj, // 跳转美团官返评价
  goToOrderCheckFun, // 上传凭证事件
  handleUploadOrderNo, // 提交审核
  challengeCountdown, // 挑战赛倒计时
  findcountdown, // 上传凭证倒计时
  findcountdownThere, // 上传订单号倒计时
  cashOutFun, // 提现
  goToOrderPageFun, // 跳转订单页面
  getPhoneNumber, // 微信授权绑定手机号码
  submitTemCode, // 提交邀请码
  updateOrderNo, // 提交订单号
  orderNoCopy, // 复制订单号
  submitOrderNum, // 提交订单号到后台
} = useMe()
const handleDcroll = (e) => {
  // console.log('页面滚动了=', e)
}
onShow(()=> {
  // console.log('memberStyle=', memberStyle)
})
</script>

<template>
  <!-- 个人中心 -->
  <view class="me_box">
    <!-- #ifdef APP-PLUS || MP-->
    <view class="top_box_bg"></view>
    <!-- #endif-->
    <!-- #ifdef H5-->
    <view class="top_box_bg" style="height: 660rpx"></view>
    <!-- #endif-->
    <!--头部内容盒子-->
    <view class="top_box_content">
      <!--<image style="width: 750rpx;height: 490rpx;position: absolute;z-index: 68;top: 0;left: 0" :src="BaseImgUrl + '/once/top_bg1.png'"></image>-->
      <!-- #ifdef APP-PLUS || MP-->
      <view class="header_box" :style="{
          background: scHeight > 0.1 ? '#FEF6EE' : 'transparent',
          position:  scHeight > 0.1 ? 'fixed': '',
          boxShadow: scHeight > 0.1 ? '4rpx 0 10rpx 0 rgba(0,0,0,0.1)' : '',
          height: '300rpx',
        }">
        <u-status-bar></u-status-bar>
        <view class="top_content" :style="{width: menuRightWidth - 10 + 'px'}">
          <view class="top_content_logo">
            <!--<image :src="BaseImgUrl + '/me/me_title_img.png'" mode="widthFix" style="width: 100%;"></image>-->
            <cache-image :img-src="BaseImgUrl + '/me/me_title_img.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'210rpx',height:'36rpx'}"></cache-image>
          </view>
          <view class="top_content_right">
            <!--<image @click="commonInfoStore.toKeFu()" :src="BaseImgUrl + '/me/me_kefu.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>-->
            <view @click="commonInfoStore.toKeFu()">
              <cache-image :img-src="BaseImgUrl + '/me/me_kefu.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx'}"></cache-image>
            </view>
            <!--<image @click="toMsg()" :src="BaseImgUrl + '/me/me_msg.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>-->
            <view @click="toMsg()" class="me_msg">
              <view v-if="msgList.length>0"  class="tixing_box">{{ msgList.length }}</view>
              <view v-else class="tixing"></view>
            </view>
            <view @click="toMsg()">
              <cache-image :img-src="BaseImgUrl + '/me/me_msg.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx'}"></cache-image>
            </view>
          </view>
        </view>
        <view class="icon_content">
          <view class="my_info_box" style="flex: 1;z-index: 99;" v-if="!user?.id">
            <view @click="user_login()" class="header_img">
              <!--<image :src="BaseImgUrl + '/images/logo_login.png'" style="width: 98rpx;height: 98rpx;"></image>-->
              <cache-image :img-src="BaseImgUrl + '/images/logo_login.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'98rpx',height:'98rpx',borderRadius: '50%'}"></cache-image>
            </view>
            <view class="username_box">
              <view class="username" @click="user_login()">
                点击登录
              </view>
            </view>
          </view>
          <view class="my_info_box" style="flex: 1;z-index: 99;" v-else>
            <view class="header_img" @tap="handleUpdateAvatar" style="position: relative">
              <!--<image :src="user.avatar" style="width: 98rpx;height: 98rpx;border-radius: 50%;"></image>-->
              <cache-image :img-src="user.avatar" :isimg="true" imgMode="widthFix" :image-style="{width:'98rpx',height:'98rpx',borderRadius: '50%'}"></cache-image>
              <!--<image :src="!user?.level?.level?vipIcon[0]:vipIcon[user?.level?.level]" style="width: 40rpx;height: 40rpx;border: none;position: absolute;bottom: 0;right: 0"></image>-->
            </view>
            <view class="username_box" style="z-index: 99;">
              <view class="username">
                <view class="nickname" @tap="handleUpdateAvatar">{{
                    user.nickname ? user.nickname : '领食用户'
                  }}
                </view>
                <view class="join_num">加入{{calculateDateDifferenceFun(user.create_time, new Date())}}天</view>
              </view>
              <view class="phone" v-if="user.username" @tap="handleUpdateAvatar">
                手机号：{{ user.username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
              </view>
              <view class="phone" v-if="!user.username" @click="handleBindPhone">点击绑定手机号</view>

            </view>
          </view>
          <view class="Set_box">
            <!--<up-button
                type="primary"
                color="#ffffff00"
                shape="circle"
                @tap="pageUrl('/pagesme/message',false)"
                :customStyle="{padding: '16rpx 0',marginRight: '0'}">
              <image style="width: 50rpx;height: 50rpx;margin: 0 10rpx"
                     :src="BaseImgUrl + '/once/setting.png'"></image>
            </up-button>-->
            <view
                type="primary"
                color="#ffffff00"
                shape="circle"
                @tap="pageUrl('/pages/setting/setting',false)"
                :customStyle="{padding: '16rpx 0',marginRight: '0'}">
              <!--<image :src="BaseImgUrl + '/me/me_set.png'" style="width: 40rpx;height: 40rpx;margin: 0 10rpx"></image>-->
              <cache-image :img-src="BaseImgUrl + '/me/me_set.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx',margin: '0 10rpx'}"></cache-image>
            </view>
            <!--<view
                @click="commonInfoStore.toKeFu()"
                type="primary"
                color="#ffffff00"
                shape="circle"
                :customStyle="{padding: '16rpx 0',marginRight: 0}">
              <image style="width: 50rpx;height: 50rpx;margin: 0 10rpx" :src="BaseImgUrl + '/once/kefu.png'"></image>
            </view>-->
          </view>
          <!--浮动窗阴影盒子-->
          <!--<view class="shadow_box" v-if="scHeight > 0"></view>-->
        </view>
      </view>
      <!-- #endif -->
      <!--处理H5的浮动窗-->
      <!-- #ifdef H5-->
      <view :style="{marginTop: scHeight > 0 ? '174rpx': '30rpx'}"></view>
      <view class="header_box" :style="{
          background: scHeight > 0.1 ? '#FEF6EE' : 'transparent',
          position:  scHeight > 0.1 ? 'fixed': '',
          boxShadow: scHeight > 0.1 ? '4rpx 0 10rpx 0 rgba(0,0,0,0.1)' : '',
          height: '200rpx',
        }">
        <view class="top_content" :style="{width: menuRightWidth - 10 + 'px'}">
          <view class="top_content_logo">
            <!--<image :src="BaseImgUrl + '/me/me_title_img.png'" mode="widthFix" style="width: 100%;"></image>-->
            <cache-image :img-src="BaseImgUrl + '/me/me_title_img.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'210rpx',height:'36rpx'}"></cache-image>
          </view>
          <view class="top_content_right">
            <!--<image @click="commonInfoStore.toKeFu()" :src="BaseImgUrl + '/me/me_kefu.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>-->
            <view @click="commonInfoStore.toKeFu()" style="margin-right: 20rpx;">
              <cache-image :img-src="BaseImgUrl + '/me/me_kefu.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx'}"></cache-image>
            </view>
            <!--<image @click="toMsg()" :src="BaseImgUrl + '/me/me_msg.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>-->
            <view class="me_msg" style="right: 16rpx;">
              <view v-if="msgList.length>0"  class="tixing_box">{{ msgList.length }}</view>
              <view v-else class="tixing"></view>
            </view>
            <view @click="toMsg()" style="margin-right: 20rpx;">
              <cache-image :img-src="BaseImgUrl + '/me/me_msg.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx'}"></cache-image>
            </view>
            <!--#ifdef H5-->
            <view style="width: 20rpx;"></view>
            <!--#endif-->
          </view>
        </view>
        <view class="icon_content"  style="left: 0;right: 0;z-index: 10" :style="{
          background: scHeight > 0 ? '#FEF6EE' : 'transparent',
          position:  scHeight > 0 ? 'fixed': '',
          top: scHeight > 0 ? '0' : '0',
          paddingTop: scHeight > 0 ? '16px' : '0',
        }">
          <view class="my_info_box" style="flex: 1;z-index: 99;" v-if="!user?.id">
            <view @click="user_login()" class="header_img">
              <!--<image :src="BaseImgUrl + '/images/logo_login.png'" @click="user_login()"></image>-->
              <cache-image :img-src="BaseImgUrl + '/images/logo_login.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'98rpx',height:'98rpx',borderRadius: '50%'}"></cache-image>
            </view>
            <view class="username_box">
              <view class="username" @click="user_login()">
                点击登录
              </view>
            </view>
          </view>
          <view class="my_info_box" style="flex: 1;z-index: 99;" v-else>
            <view class="header_img" @tap="handleUpdateAvatar" style="position: relative">
              <!--<image :src="user.avatar"></image>-->
              <cache-image :img-src="user.avatar" :isimg="true" imgMode="widthFix" :image-style="{width:'98rpx',height:'98rpx',borderRadius: '50%'}"></cache-image>
              <!--<image :src="!user?.level?.level?vipIcon[0]:vipIcon[user?.level?.level]" style="width: 40rpx;height: 40rpx;border: none;position: absolute;bottom: 0;right: 0"></image>-->
            </view>
            <view class="username_box" style="z-index: 99;">
              <view class="username">
                <view class="nickname" @tap="handleUpdateAvatar">{{
                    user.nickname ? user.nickname : '领食用户'
                  }}
                </view>
                <view class="join_num">加入{{calculateDateDifferenceFun(user.create_time, new Date())}}天</view>
              </view>
              <view class="phone" v-if="user.username" @tap="handleUpdateAvatar">
                手机号：{{ user.username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
              </view>
              <view class="phone" v-if="!user.username" @click="handleBindPhone">点击绑定手机号</view>

            </view>
          </view>
          <view class="Set_box">
            <!--<up-button
                type="primary"
                color="#ffffff00"
                shape="circle"
                @tap="pageUrl('/pagesme/message',false)"
                :customStyle="{padding: '16rpx 0',marginRight: '0'}">
              <image style="width: 50rpx;height: 50rpx;margin: 0 10rpx"
                     :src="BaseImgUrl + '/once/setting.png'"></image>
            </up-button>-->
            <view
                type="primary"
                color="#ffffff00"
                shape="circle"
                @tap="pageUrl('/pages/setting/setting',false)"
                :customStyle="{padding: '16rpx 0',marginRight: '0'}">
              <!--<image :src="BaseImgUrl + '/me/me_set.png'" style="width: 40rpx;height: 40rpx;margin: 0 10rpx"></image>-->
              <cache-image :img-src="BaseImgUrl + '/me/me_set.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx',margin: '0 10rpx'}"></cache-image>
            </view>
            <!--<view
                @click="commonInfoStore.toKeFu()"
                type="primary"
                color="#ffffff00"
                shape="circle"
                :customStyle="{padding: '16rpx 0',marginRight: 0}">
              <image style="width: 50rpx;height: 50rpx;margin: 0 10rpx" :src="BaseImgUrl + '/once/kefu.png'"></image>
            </view>-->
          </view>
          <!--浮动窗阴影盒子-->
          <view class="shadow_box" v-if="scHeight > 0"></view>
        </view>
      </view>
      <!-- #endif -->
      <!--填充空白位置 style="height: 163px;"-->
      <view v-if="scHeight > 0" class="fill_box" :style="{height: headerBoxHeight + 'px'}"></view>

    </view>
    <!--主体内容盒子-->
    <view class="me_content" :style="{height: 'calc(100% - ' + headerBoxHeight + 'px)', top: headerBoxHeight + 'px'}">
      <scroll-view scroll-y="true" @scroll="handleDcroll" class="scroll_view">
        <!--我的钱包、会员等级、卡券、红包-->
        <view class="top_wrap">
          <view class="top_wrap_content">
            <view class="top_wrap_title">
              <view class="top_wrap_title_text">我的钱包</view>
              <view @click="pageUrl('/pages/moneydetail/moneydetail',false)" class="top_wrap_title_sub">明细<u-icon name="arrow-right" size="12" color="#A7A7A7"></u-icon></view>
              <!--会员盒子-->
              <view class="top_wrap_level">
                <view v-if="user?.is_member === 0 || user?.is_member == undefined" class="level_sjx" style="border-bottom-color: #C5C5C5;"></view>
                <view v-else class="level_sjx" :style="{borderBottomColor: memberStyle?.sjxColor}"></view>
                <view class="level_content" :style="{background: memberStyle?.background}">
                  <view @click.stop="toVip" class="level_content_left">
                    <view class="level_content_left_title">
                      <image v-if="!user" :src="BaseImgUrl + '/me/me_vip0.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
                      <view v-else>
                        <image v-if="user?.is_member === 0 || user?.is_member == undefined" :src="BaseImgUrl + memberStyle?.liveImg" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
                        <image v-if="user?.is_member === 1" :src="BaseImgUrl + memberStyle?.liveImg" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
                      </view>
                      <view v-if="!user" class="level_content_left_title_text">开通领食会员</view>
                      <view v-else>
                        <view v-if="user?.is_member === 0 || user?.is_member == undefined" class="level_content_left_title_text" :style="{color: memberStyle?.liveColor}">开通领食会员</view>
                        <view v-if="user?.is_member === 1" class="level_content_left_title_text" :style="{color: memberStyle?.liveColor}">当前等级V{{ user?.level.level }}</view>
                      </view>
                    </view>
                    <view v-if="user?.is_member ===1 && user?.level?.level!==5" class="level_content_progress" :style="{background: memberStyle?.progressBack}">
                      <!--<progress
                          :percent="((user?.level?.nums/user?.level?.order_task)*100) === 0 ?  user?.level?.level!==5 ? 5:100 : (user?.level?.nums/user?.level?.order_task)*100"
                          border-radius="100"
                          duration="6"
                          stroke-width="8"
                          :activeColor="{#fa7649}"
                          backgroundColor="#FFF5FE"
                          active="true"/>-->
                      <view v-if="user?.is_member ===1" class="progress_active" :style="{
                    width: ((user?.level?.nums/user?.level?.order_task)*100) === 0 ?  user?.level?.level!==5 ? 5 +'%':100 : (user?.level?.nums/user?.level?.order_task)*100+'%',
                    background: memberStyle?.progressActive}"></view>
                    </view>
                    <view v-if="!user" class="level_content_desc">开通会员，享受更多福利特权</view>
                    <view v-else>
                      <view v-if="user?.is_member === 0 || user?.is_member == undefined" class="level_content_desc" :style="{color: memberStyle?.liveColor}">开通会员，享受更多福利特权</view>
                      <view v-if="user?.is_member === 1 && user?.level?.level!==5" class="level_content_desc" :style="{color: memberStyle?.textColor}">
                        <text>距离 V{{ (user?.level?.level || 1) + 1 }} 还需要</text>
                        <text style="font-size: 32rpx;color: #fa7649;padding: 0 6rpx;">
                          {{ (user?.level?.order_task || 0) - (user?.level?.nums || 0) }}
                        </text>
                        <text>笔订单</text>
                      </view>
                      <view v-if="user?.level.level === 5" class="level_content_desc" style="color: #FFF385;">已是最高等级 及时完成保级任务</view>
                    </view>
                  </view>
                  <view v-if="!user" @click.stop="toVip" class="level_content_right" style="padding: 0 6rpx;color: #ffffff;background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);">立即开通</view>
                  <view v-else >
                    <view @click.stop="toVip" v-if="user?.is_member === 0 || user?.is_member == undefined" class="level_content_right" :style="{color: memberStyle?.btnColor,background: memberStyle?.btnBack, padding: '0 6rpx'}">立即开通</view>
                    <view @click.stop="toIndex" v-if="user?.is_member === 1 && user?.level.level <= 4 && user?.level.level > 0" class="level_content_right" :style="{color: memberStyle?.btnColor,background: memberStyle?.btnBack}">去升级</view>
                    <view @click.stop="toIndex" v-if="user?.level.level === 5" class="level_content_right" style="height: 100rpx;"><image :src="BaseImgUrl + memberStyle?.btnBack" mode="widthFix" style="width: 100rpx;"></image></view>
                  </view>
                </view>
              </view>
            </view>
            <view class="top_wrap_content_money">
              <view class="wrap_content_money_left">
                <view class="wrap_content_money_left_t">
                  <text>可提现余额(元)</text>
                  <!--<image :src="BaseImgUrl + '/me/me_money_img.png'" mode="widthFix" style="width: 140rpx;height: 32rpx;"></image>-->
                  <cache-image :img-src="BaseImgUrl + '/me/me_money_img.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'140rpx',height:'32rpx'}" style="margin-top: 10rpx;"></cache-image>
                </view>
                <view class="wrap_content_money_left_m">
                  <view class="wrap_content_money_left_m_money">{{ user?.money || '0.00' }}</view>
                  <view @click="cashOutFun()" class="wrap_content_money_left_m_btn">提现</view>
                </view>
              </view>
              <view class="wrap_content_money_line"><u-line color="#EBEBEB" direction="col" hairline></u-line></view>
              <view class="wrap_content_money_right">
                <view class="wrap_content_money_right_t">累计节省(元)</view>
                <view class="wrap_content_money_right_m">
                  <view class="wrap_content_money_right_m_money">{{ user?.all_money || '0.00' }}</view>
                </view>
              </view>
            </view>
            <view class="top_wrap_content_line"><u-line color="#F0F0F0" hairline></u-line></view>
            <view class="top_wrap_content_group">
              <view @tap="pageUrl('/pages/makemoney/mygroup',false)" class="wrap_content_group_item group_left">
                <view class="group_left_title">
                  <view class="group_left_title_text">累计团长收益</view>
                  <u-icon name="arrow-right" size="12" color="#A7A7A7"></u-icon>
                </view>
                <view class="group_left_m">
                  <view class="group_left_m_money">{{ user?.income_money || '0.00' }}</view>
                </view>
              </view>
              <view @tap="pageUrl('/pages/makemoney/mygroup',false)" class="wrap_content_group_item group_center">
                <view class="group_left_title">
                  <view class="group_left_title_text">累计团员</view>
                  <u-icon name="arrow-right" size="12" color="#A7A7A7"></u-icon>
                </view>
                <view class="group_left_m">
                  <view class="group_left_m_num">{{ user?.spread_people_num || 0 }}</view>
                </view>
              </view>
              <view @tap="pageUrl('/pages/makemoney/mygroup',false)" class="wrap_content_group_item group_center">
                <view class="group_left_title">
                  <view class="group_left_title_text">有效团员</view>
                  <u-icon name="arrow-right" size="12" color="#A7A7A7"></u-icon>
                </view>
                <view class="group_left_m">
                  <view class="group_left_m_num">{{ memberLists.list?.length || 0 }}</view>
                </view>
              </view>
            </view>
            <view class="top_wrap_content_foot">
              <view @click="pageUrl('/pagesme/red_bag?current=0',false)" class="wrap_content_foot_item">
                <view class="wrap_content_foot_img">
                  <!--<image :src="BaseImgUrl + '/me/me_coupon_ocpm.png'" mode="widthFix" style="width: 52rpx;height: 52rpx;"></image>-->
                  <cache-image :img-src="BaseImgUrl + '/me/me_coupon_ocpm.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'52rpx',height:'52rpx'}"></cache-image>
                </view>
                <view class="wrap_content_foot_text">卡券（{{user?.cardCount ? user?.cardCount : 0}}）</view>
                <u-icon name="arrow-right" size="13" color="#A7A7A7" top="2"></u-icon>
              </view>
              <view class="wrap_content_foot_line">
                <image :src="BaseImgUrl + '/me/me_divider_line.png'" style="width: 10rpx;height: 100%;"></image>
              </view>
              <view @click="pageUrl('/pagesme/red_bag?current=1',false)" class="wrap_content_foot_item">
                <view class="wrap_content_foot_img">
                  <!--<image :src="BaseImgUrl + '/me/me_coupon_ocpm.png'" mode="widthFix" style="width: 52rpx;height: 52rpx;"></image>-->
                  <cache-image :img-src="BaseImgUrl + '/me/me_coupon_ocpm.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'52rpx',height:'52rpx'}"></cache-image>
                </view>
                <view class="wrap_content_foot_text"> 红包（{{user?.redCount ? user?.redCount : 0}}）</view>
                <u-icon name="arrow-right" size="13" color="#A7A7A7" top="2"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <!--红包到期提示 redBagLists v-if="redBagLists.length>0"-->
        <view v-if="redBagLists.length>0 || firstOrderBanner.length>0" class="red_packet_expire_tip">
          <view class="red_packet_expire_tip_content" :style="{background: newUser == '新用户' ? '' : '#FFFFFF',padding: newUser == '新用户' ? '0' : '10rpx 20rpx 0'}">
            <swiper :vertical="true" :autoplay="true" interval="5000" :circular="true" style="min-height: 88rpx;">
              <swiper-item v-for="(item, index) in redBagLists" :key="index">
                <view @tap="goToPage({path: '/pages/index/index'}, true)" style="display: flex;align-items: center;">
                  <view class="red_packet_expire_tip_img">
                    <text class="red_packet_expire_tip_img_text">￥{{ Number(item.money).toFixed(1) }}</text>
                    <!--<image :src="BaseImgUrl + '/me/me_money_img02.png'" mode="widthFix" style="width: 80rpx;"></image>-->
                    <cache-image :img-src="BaseImgUrl + '/me/me_money_img02.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'90rpx',height:'76rpx'}"></cache-image>
                  </view>
                  <view class="red_packet_expire_tip_text" style="display: block;">
                    <view style="display: flex;justify-content: center;">
                      <text style="color: #FF410C;padding-right: 10rpx;">{{ Number(item.money).toFixed(1) }}元</text>
                      <text>{{ item.title }}</text>
                    </view>
                    <view style="display: flex;justify-content: center;align-items: center;">
                      <lszbg-uni-count-down
                          :timeItem="item.valid_date"
                          :is-day="true"
                          :is-hour="true"
                          :is-minute="true"
                          :is-second="true"
                          :timeStyle="{fontSize: 14,color: '#ff7800'}">
                      </lszbg-uni-count-down>
                      <text style="font-size: 28rpx;">后失效</text>
                    </view>
                  </view>
                  <view class="red_packet_expire_tip_btn">去抢单</view>
                </view>
              </swiper-item>
              <swiper-item v-for="(itemBanner, bannerIndex) in firstOrderBanner" :key="bannerIndex" style="display: flex;align-items: center;">
                <view @tap="pageNavUrl" :data-url="itemBanner" class="my_banner" style="width: 100%;height: 94rpx;">
                  <image :src="itemBanner.image" style="width: 100%;height: 96rpx;object-fit: unset;"></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <!--中间导航-->
        <view class="me_nav">
          <view class="me_nav_content">
            <view class="me_nav_tabBox">
              <view v-for="(item, index) in navList" :key="index" @tap="goToPage(item, item.isTab)" class="nav_item">
                <image :src="item.image" mode="widthFix" style="width: 72rpx;height: 72rpx;"></image>
                <!--<cache-image :img-src="item.image" :isimg="true" imgMode="widthFix" :image-style="{width:'72rpx',height:'72rpx'}"></cache-image>-->
                <view class="nav_item_text">{{ item.name }}</view>
              </view>
            </view>
            <view v-if="challengeList.length > 0" class="me_nav_swiper">
              <swiper :vertical="true" :autoplay="true" :circular="true" interval="5000" >
                <swiper-item v-for="(item, index) in challengeList" :key="index">
                  <view class="page_num">
                    <view class="page_num_text">{{index+1}}/{{challengeList.length}}</view>
                  </view>
                  <view  class="me_nav_swiper_box">
                    <view class="swiper_img">
                      <!--<image :src="BaseImgUrl + '/me/me_money_img01.png'" mode="widthFix" style="width: 88rpx;height: 100rpx;"></image>-->
                      <cache-image :img-src="BaseImgUrl + '/me/me_money_img01.png'" :isimg="true" imgMode="widthFix" :image-style="{width:'88rpx',height:'100rpx'}"></cache-image>
                      <view class="swiper_img_content">
                        <view class="swiper_img_text">
                          ￥<text style="font-size: 32rpx;font-weight: bold;">{{item.money}}</text>
                        </view>
                        <view class="swiper_img_desc">微信到账</view>
                      </view>
                    </view>
                    <view class="swiper_content">
                      <view class="swiper_content_title">
                        <view class="swiper_content_title_t">{{ item.title }}</view>
                        <view class="swiper_count_down">
                          <u-count-down style="color: #dd524d" :time="challengeCountdown(item)"
                                        format="DD天HH:mm:ss" autoStart :customStyle="{padding: '5rpx 20rpx'}">
                          </u-count-down>
                        </view>
                      </view>
                      <view class="swiper_content_desc">{{ item.descript }}</view>
                      <view class="swiper_steps">
                        <view class="swiper_steps_line">
                          <!--<view class="swiper_steps_left_line" >
                            <u-line v-if="item.invite_num > 0" color="#FF7F14" hairline></u-line>
                            <u-line v-else color="#DEDEDE" hairline></u-line>
                          </view>-->
                          <view class="swiper_steps_line_box">
                            <view v-for="(item2, index) in item.arrNum" :key="index"
                                  class="swiper_steps_line_item"
                                  :style="{width: 10/item.arrNum?.length*10 + '%'}">
                              <view v-if="item2.current" class="swiper_steps_line_warp">
                                <u-line color="#FF7F14" hairline length="50%"></u-line>
                                <u-line color="#FF7F14" hairline length="50%"></u-line>
                              </view>
                              <view v-else class="swiper_steps_line_warp">
                                <u-line v-if="index===item.order_num" color="#FF7F14" hairline length="50%"></u-line>
                                <u-line v-else-if="index===item.invite_num" color="#FF7F14" hairline length="50%"></u-line>
                                <u-line v-else color="#DEDEDE" hairline length="50%"></u-line>
                                <u-line color="#DEDEDE" hairline length="50%"></u-line>
                              </view>
                              <!--<u-line v-if="item2.current" color="#FF7F14" hairline></u-line>
                              <u-line v-else color="#DEDEDE" hairline></u-line>-->
                            </view>
                          </view>
                         <!-- <view class="swiper_steps_right_line">
                            <u-line v-if="item.invite_num == item.order_num" color="#FF7F14" hairline></u-line>
                            <u-line v-else color="#DEDEDE" hairline></u-line>
                          </view>-->
                        </view>
                        <view class="steps_scroll_box">
                          <view v-for="(aitem, index) in item.arrNum" :key="index" class="swiper_steps_item" :style="{width: 10/item.arrNum?.length*10 + '%'}">
                            <view v-if="aitem.current" class="swiper_steps_item_round swiper_steps_item_roundActive"></view>
                            <view v-else class="swiper_steps_item_round"></view>
                            <!--<view v-if="index < challengeList.arrNum.length-1" class="swiper_steps_item_line"></view>-->
                            <view v-if="aitem.current" class="swiper_steps_item_text" :style="{color: aitem.current ? '#FF7F14' : ''}">第{{ aitem.num }}{{ item.type === 1 ? '天' : '人' }}</view>
                            <view v-else  class="swiper_steps_item_text">第{{ aitem.num }}{{ item.type === 1 ? '天' : '人' }}</view>
                          </view>
                          <!--<view class="swiper_steps_item_last">
                            <view v-if="item.invite_num === item.order_num" class="swiper_steps_item_round swiper_steps_item_roundActive"></view>
                            <view v-else class="swiper_steps_item_round"></view>
                            <view class="swiper_steps_item_text" :style="{color: item.invite_num === item.order_num ? '#FF7F14' : ''}">第{{ item.order_num }}天</view>
                          </view>-->
                        </view>
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
        <!--我的订单-->
        <view class="me_order">
          <view class="me_order_content">
            <view class="me_order_title">
              <view class="me_order_title_text">我的订单</view>
              <view @tap="goToOrderPageFun({current: '0'})" class="me_order_title_more">
                <text>全部订单</text>
                <u-icon name="arrow-right" size="12" color="#A7A7A7" ></u-icon>
              </view>
            </view>
            <u-line color="#F6F6F6" hairline margin="20rpx 0"></u-line>
            <view class="me_order_list">
              <view v-for="(itemT, indexT) in orderTabList" :key="indexT" @tap="goToOrderPageFun(itemT)" class="me_order_item">
                <view class="me_order_item_img">
                  <!--<image :src="BaseImgUrl + itemT.icon" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>-->
                  <cache-image :img-src="BaseImgUrl + itemT.icon" :isimg="true" imgMode="widthFix" :image-style="{width:'40rpx',height:'40rpx'}"></cache-image>
                </view>
                <view class="me_order_item_text">{{ itemT.name }}</view>
                <view v-if="itemT.count > 0" class="me_order_item_num">{{ itemT.count }}</view>
              </view>
            </view>
            <view v-if="orderProgressLists.length > 0" class="order_swiper">
              <swiper :vertical="true" :autoplay="true" interval="5000" :circular="true">
                <swiper-item v-for="(item, index) in orderProgressLists" :key="index">
                  <view class="order_swiper_item">
                    <view class="order_swiper_left">
                      <view v-if="item.order_type == 1" class="order_swiper_img"><image :src="item.shop.logo" mode="widthFix" style="width: 88rpx;"></image></view>
                      <view v-if="item.order_type == 2" class="order_swiper_img"><image :src="item.picture" mode="widthFix" style="width: 88rpx;"></image></view>
                      <view v-if="item.order_type == 1" class="order_swiper_item_content">
                        <view v-if="item.status === 0 && item.is_cancel === 0 && item.check_status === 0" class="order_swiper_item_title">请在规定时间内完成下单并提交单号</view>
                        <view v-if="item.status === 0 && item.is_cancel === 0 && item.check_status > 0 && item.check_status < 5 && item.check_status !== 2" class="order_swiper_item_title">请在规定时间内完成上传凭证</view>
                        <view v-if="item.status === 1 && item.is_cancel === 0 && item.check_status > 0" class="order_swiper_item_title">订单正在审核中，请耐心等待</view>
                        <view v-if="item.status > 1 && item.status < 4 && item.is_cancel === 0 && item.check_status >= 3" class="order_swiper_item_title">订单被驳回</view>
                        <view v-if="item.status === 0 && item.is_cancel === 0 && item.check_status === 2" class="order_swiper_item_title">请在规定时间内完提交审核</view>
                        <!-- 抢单未点餐时的倒计时 -->
                        <view v-if="item.status === 0 && item.is_cancel === 0 && item.check_status === 0" class="order_count_down">
                          <text>剩余时间：</text>
                          <up-count-down :time="findcountdownThere(item)"
                                         format="HH:mm:ss" autoStart style="color: #F97632"
                                         :customStyle="{color: '#F97632', fontSize: '26rpx'}">
                          </up-count-down>
                        </view>
                        <!-- 点餐并且保存了订单号时显示上传凭证的倒计时 -->
                        <view v-if="item.status === 0 && item.is_cancel === 0 && item.check_status > 0" class="order_count_down">
                          <text>剩余时间：</text>
                          <u-count-down style="color: #dd524d" :time="findcountdown(item)"
                                        format="HH:mm:ss" autoStart >
                          </u-count-down>
                        </view>
                      </view>
                      <view v-if="item.order_type == 2" class="order_swiper_item_content">
                        <view v-if="item.code == 3" class="order_swiper_item_title">请在规定时间内完成下单</view>
                        <view v-if="item.code == 4" class="order_swiper_item_title">请尽快去评价获得返利</view>
                        <view v-if="item.code == 99" class="order_swiper_item_title">您的订单有可疑，请及时联系客服</view>
                        <!-- 抢单未点餐时的倒计时 -->
                        <view v-if="item.code == 3" class="order_count_down">
                          <text>剩余时间：</text>
                          <view v-if="findcountdown(item) > 0">
                            <up-count-down :time="findcountdownThere(item)"
                                           format="HH:mm:ss" autoStart style="color: #F97632"
                                           :customStyle="{color: '#F97632', fontSize: '26rpx'}">
                            </up-count-down>
                          </view>
                          <view v-else>已过期</view>
                        </view>
                      </view>
                    </view>
                    <view v-if="item.order_type == 1" class="order_swiper_right_box">
                      <view @tap="updateOrderNo(item)" v-if="item.status === 0 && item.is_cancel === 0 && item.check_status === 0" class="order_swiper_right">提交单号</view>
                      <view @tap="goToOrderCheckFun(item)" v-if="item.status === 0 && item.is_cancel === 0 && item.check_status > 0 && item.check_status < 5 && item.check_status !== 2" class="order_swiper_right">上传凭证</view>
                      <view @tap="goToPage({path: '/pages_order/me_order?current=1'}, false)" v-if="item.status === 1 && item.is_cancel === 0 && item.check_status >=0" class="order_swiper_right">审核中</view>
                      <view @tap="goToOrderCheckFun(item)" v-if="item.status === 2 && item.is_cancel === 0 && item.check_status > 0" class="order_swiper_right">修改上传</view>
                      <view @tap="handleUploadOrderNo(item.id)" v-if="item.status === 0 && item.is_cancel === 0 && item.check_status === 2" class="order_swiper_right">提交审核</view>
                      <view v-if="item.status > 1 && item.status < 4 && item.is_cancel === 0 && item.check_status >= 3" @click="commonInfoStore.toKeFu()" style="padding-left:10rpx;display: flex;align-items: center;">
                        <image :src="BaseImgUrl + '/me/me_kefu.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
                        <text style="font-size: 28rpx;line-height: 40rpx;color: #888888;">联系客服</text>
                      </view>
                    </view>
                    <view v-if="item.order_type == 2" class="order_swiper_right_box">
                      <view @tap="goGFShop(1, item.wxPath)" v-if="item.code == 3" class="order_swiper_right" style="position: relative;">
                        进店下单
                        <!-- #ifdef H5 -->
                        <wx-open-launch-weapp id="launch-btn"
                                              :username="getBuToPagePath(item.order_type == 2 || item.order_type == 3 ? 1 : item.shop.type)"
                                              :path="item.order_type == 2 || item.order_type == 3 ? item?.wxPath  : item.shop.path"
                                              style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                          <component :is="'script'" type='text/wxtag-template' style="display: block;">
                            <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                          </component>
                        </wx-open-launch-weapp>
                        <!-- #endif -->
                      </view>
                      <view @tap="goGFPj()" v-if="item.code == 4" class="order_swiper_right" style="position: relative;">
                        去评价
                        <!-- #ifdef H5 -->
                        <wx-open-launch-weapp id="launch-btn"
                                              :username="mtAppId" :path="mtOrderUrl"
                                              style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                          <component :is="'script'" type='text/wxtag-template' style="display: block;">
                            <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                          </component>
                        </wx-open-launch-weapp>
                        <!-- #endif -->
                      </view>
                      <view v-if="item.code == 99" @click="commonInfoStore.toKeFu()" style="padding-left:10rpx;display: flex;align-items: center;">
                        <image :src="BaseImgUrl + '/me/me_kefu.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
                        <text style="font-size: 28rpx;line-height: 40rpx;color: #888888;">联系客服</text>
                      </view>
                    </view>

                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
        <!--邀请用户下单得奖励-->
        <!--<view class="me_invite">
          <view @click="cashOutFun()" class="me_invite_content">
            <view class="me_invite_bg"><image :src="BaseImgUrl + '/me/me_invite_bg.png'" mode="widthFix" style="width: 100%;"></image></view>
            <view class="me_invite_title"><image :src="BaseImgUrl + '/me/me_invite_title.png'" mode="heightFix" style="height: 100%;"></image></view>
            <view class="me_invite_img"><image :src="BaseImgUrl + '/me/me_invite_img01.png'" mode="widthFix" style="width: 100%;"></image></view>
            <view class="me_invite_btn">
              <view class="me_invite_btn_text">去提现</view>
            </view>
          </view>
        </view>-->
        <view class="middle_content">
          <!--<view
              style="height: 100rpx;margin-bottom: 20rpx;position: relative;background-color: white;border-radius: 10rpx;padding: 0 26rpx">
            <view style="display: flex;z-index: 1;align-items: center;height: 100%" v-if="userInfoStore.isOpenWXLogin">
              <up-col span="6" justify="center" text-align="center" customStyle="z-index: 1"
                      @click="pageUrl('/pages/moneydetail/moneydetail',false)">
                <view style="display: flex;align-items: center">
                  <image style="width: 68rpx;height: 68rpx" :src="BaseImgUrl + '/once/money.png'"></image>
                  <text style="color: black;font-size: 26rpx;margin-left: 20rpx">我的钱包</text>
                  <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"
                         :src="BaseImgUrl + '/once/right.png'"></image>
                </view>
              </up-col>
              <up-col span="6" justify="center" text-align="center" customStyle="z-index: 1"
                      @click="pageUrl('/pagesme/red_bag',false)">
                <view style="display: flex;align-items: center">
                  <view style="flex: 1;height: 60rpx;"></view>
                  <image style="width: 68rpx;height: 68rpx" :src="BaseImgUrl + '/once/kaquan.png'"></image>
                  <text style="color: black;font-size: 26rpx;margin-left: 20rpx">红包卡券</text>
                  <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"
                         :src="BaseImgUrl + '/once/right.png'"></image>
                </view>
      &lt;!&ndash;          <image style="width: 68rpx;height: 68rpx" :src="BaseImgUrl + '/once/kaquan.png'"></image>&ndash;&gt;
      &lt;!&ndash;          <text style="color: black;font-size: 26rpx;margin-left: 20rpx">红包卡券</text>&ndash;&gt;
      &lt;!&ndash;          <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx" :src="BaseImgUrl + '/once/right.png'"></image>&ndash;&gt;
              </up-col>
            </view>
          </view>-->
          <!--<view class="middle_price" v-if="userInfoStore.isOpenWXLogin">
            <view class="small_box" @tap="pageUrl('/pages/makemoney/makemoney',true)">
              <view class="price">{{ user?.income_money || '0.00' }}</view>
              <view class="text">推广收益</view>
            </view>
            <view class="small_box" @tap="pageUrl('/pages/moneydetail/moneydetail?type=3',false)">
              <view class="price">{{ user?.all_money || '0.00' }}</view>
              <view class="text">累计节省</view>
            </view>
            <view class="small_box" @tap="pageUrl('/pages/cashout/cashout',false)">
              <view class="price">{{ user ? user['money'] : '0.00' }}</view>
              <view class="text">可提余额</view>
            </view>
          </view>-->
          <view class="middle_banner" v-if="banners.length>0">
            <banner :banners="banners"></banner>
          </view>

          <view class="bottom_list" v-if="navMenu.length>0 && userInfoStore.isOpenWXLogin">
            <view class="title">我的服务</view>
            <view style="display: flex;flex-wrap: wrap">
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx"
                      v-for="(item, index) in navMenu" :key="index">
                <view @tap="pageNavUrl" :data-url="item">
                  <!--<image :src="item.image" style="width: 76rpx;height: 76rpx;margin: auto"></image>-->
                  <cache-image :img-src="item.image" :isimg="true" imgMode="widthFix" :image-style="{width:'76rpx',height:'76rpx',margin:'auto'}"></cache-image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">{{ item.name }}</view>
                </view>
              </u-col>
              <!--<view @tap="gotuMeituanPage" >
                <image  style="width: 76rpx;height: 76rpx;margin: auto"></image>
                <view class="text" style="margin-top: 16rpx;font-size: 26rpx">美团</view>
              </view>-->
            </view>
          </view>
          <view class="bottom_list" v-if="IsDevelopment">
            <view class="title">测试</view>
            <view style="display: flex;flex-wrap: wrap">
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >
                <view @tap="pageUrl('/pagesme/message',false)" >
                  <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png" style="width: 76rpx;height: 76rpx;margin: auto"></image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">扫码</view>
                </view>
              </u-col>
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >
                <view @tap="pageUrl('/pages_gold/blind_box',false)" >
                  <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png"
                         style="width: 76rpx;height: 76rpx;margin: auto"></image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">助力开盲盒</view>
                </view>
              </u-col>
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >
                <view @tap="pageUrl('/pages_gold/blind_box_poster',false)" >
                  <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png"
                         style="width: 76rpx;height: 76rpx;margin: auto"></image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">生成分享海报🔥</view>
                </view>
              </u-col>
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >
                <view @tap="pageUrl('/pages_gold/bonus',false)" >
                  <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png"
                         style="width: 76rpx;height: 76rpx;margin: auto"></image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">人人领红包</view>
                </view>
              </u-col>
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >
                <view @tap="pageUrl('/challenge/media_promotion',false)" >
                  <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png"
                         style="width: 76rpx;height: 76rpx;margin: auto"></image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">小红书文案</view>
                </view>
              </u-col>
              <u-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >
                <view @tap="pageUrl('/pages_gold/order',false)" >
                  <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png"
                         style="width: 76rpx;height: 76rpx;margin: auto"></image>
                  <view class="text" style="margin-top: 16rpx;font-size: 26rpx">订单详情</view>
                </view>
              </u-col>
              <!--        <up-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx" >-->
              <!--          <view @tap="pageUrl('/pages_raffle/index_raffle',false)" >-->
              <!--            <image src="https://lsz.lszbg.com/public/uploads/honour/_4bf639fc84c8bc7879c490739a6bd27d.png"-->
              <!--                   style="width: 76rpx;height: 76rpx;margin: auto"></image>-->
              <!--            <view class="text" style="margin-top: 16rpx;font-size: 26rpx">抽奖</view>-->
              <!--          </view>-->
              <!--        </up-col>-->
            </view>
          </view>
          <view class="message">
            <view>Copyright @ 2021-2023</view>
            <view>四川业淳网络科技有限公司</view>
          </view>
          <view style="height: 50rpx"></view>

        </view>
      </scroll-view>
    </view>
    <!--<view class="user_top">
      <image class="user_top_bg" :src="BaseImgUrl + '/once/top_bg2.png'"></image>
      <view class="user_top_money_content" @tap="pageUrl('/pagesme/vip/vip',false)">
        <image class="user_top_money_bg" style="z-index: 100" :src="BaseImgUrl + '/once/user_vip.png'"
               v-if="user?.is_member === 0"></image>
        <view style="width: 30rpx"></view>
        <view class="user_top_money_text" style="z-index: 100">
          <view style="font-weight: bold;z-index: 130">
            <view style="font-size: 24rpx;color: #888888;margin-top: 10rpx" v-if="user?.is_member === 1">
              当前等级V{{ user?.level?.level || 1 }}
              <text v-if="user?.level?.level!==5">，距离 V{{ (user?.level?.level || 1) + 1 }} 还需要</text>
              <text v-if="user?.level?.level!==5" style="font-size: 32rpx;color: #fa7649;">
                {{ (user?.level?.order_task || 0) - (user?.level?.nums || 0) }}
              </text>
              <text v-if="user?.level?.level!==5">笔订单</text>
              <text v-if="user?.level?.level===5">，已经是最高等级</text>
            </view>
            {{ user?.is_member === 0 || !user?.id ? "尚未开通会员" : "" }}
            <view v-if="user?.id" class="vip_con">
            </view>
          </view>
          <view class="" style="flex: 1;margin-top: 20rpx;display: flex;align-items: center"
                v-if="user?.is_member === 1">
            <view style="margin-left: 10rpx;color: #fa7649;font-weight: bold;font-size: 28rpx">V{{
                user?.level?.level !== 5 ? user?.level?.level || 0 : 4
              }}
            </view>
            <view style="flex: 1;width: 260rpx;margin: 0 10rpx;border-radius: 20rpx;overflow: hidden">
              <progress
                  :percent="((user?.level?.nums/user?.level?.order_task)*100) === 0 ?  user?.level?.level!==5 ? 5:100 : (user?.level?.nums/user?.level?.order_task)*100"
                  border-radius="100"
                  duration="6"
                  stroke-width="8"
                  activeColor="#fa7649"
                  backgroundColor="#FFF5FE"
                  active="true"/>
            </view>
            <view style="margin-left: 10rpx;color: #fa7649;font-weight: bold;font-size: 28rpx">V{{
                user?.level?.level !== 5 ? (user?.level?.level || 1) + 1 : 5
              }}
            </view>
          </view>
          <view style="font-weight: bold;font-size: 22rpx;color: #888888;margin-top: 10rpx">
            {{ user?.is_member === 0 || !user?.id ? "开通会员，享受更多福利特权" : "" }}
          </view>
        </view>
        <view style="flex: 1"></view>
        <view class="open_vip" style="z-index: 100" @click.stop="toIndex">
          {{ user?.is_member === 0 || !user?.id ? "开通会员" : user?.level?.level === 5 ? "去下单" : "去升级" }}
        </view>
      </view>
      <view style="height: 30rpx"></view>
    </view>-->
  </view>
  <!--手机绑定提示弹窗-->
  <up-popup :show="isShowBindPhone" mode="center" @close="isShowBindPhone = false" :safe-area-inset-bottom="false" bg-color="transparent" :customStyle="{with: '640rpx',height: '770rpx'}">
    <view class="bind_phone_box">
      <view class="bind_phone_bg"><image :src="BaseImgUrl + '/me/bind_phone_pop_bg.png'" mode="widthFix"></image></view>
      <view class="bind_phone_content">
        <view class="title">
          <view class="title_text">绑定手机号</view>
          <view class="title_text">领取1个月会员</view>
        </view>
        <view class="bind_phone_icon"><image :src="BaseImgUrl + '/me/bind_phone_pop_img01.png'" mode="widthFix" style="width: 100%;"></image></view>
        <view class="bind_phone_text" style="font-size: 32rpx;font-weight: bold;">您还未绑定手机号？</view>
        <view class="bind_phone_text" style="margin-bottom: 50rpx;">手机号用于抢单、订单核验，和订单状态通知 是否去绑定?</view>
        <!--<view class="bind_phone_btn" @tap="goToBindPhone">去绑定，领会员</view>-->
        <!--#ifdef MP-->
        <button class="bind_phone_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去绑定，领会员</button>
        <!--#endif-->
        <!-- #ifdef H5 || APP-PLUS -->
        <view class="bind_phone_btn" @tap="goToBindPhone">去绑定，领会员</view>
        <!-- #endif -->
      </view>
      <view class="close"><u-icon name="close" size="19" color="#FFFFFF" @tap="isShowBindPhone = false"></u-icon></view>
    </view>
  </up-popup>
  <!--入团弹窗-->
  <u-popup :show="isShowjoinLeague" mode="center" @close="isShowjoinLeague = false" :safe-area-inset-bottom="false" bg-color="transparent" >
    <view class="join_league_box">
      <view class="content_boxs">
        <view class="know_t">填写邀请码</view>
        <view style="margin: 30rpx;font-size: 28rpx;color: #3D3D3D;">邀请码</view>
        <view class="input_name" style="margin: 0 20rpx;">
          <up-input border="none"
                    class="inputWidth"
                    clearable
                    :customStyle="{background:'#F6F6F6','border-radius': 0,padding:'10rpx 20rpx'}"
                    placeholder="请输入邀请码" v-model="temCode"/>
        </view>
        <view class="desc_text" style="padding: 20rpx 20rpx 10rpx;display: flex">
          <view style="flex: 1"></view>
          <text style="color: #FF3E00;font-size: 26rpx">填写邀请码才能入团</text>
        </view>
        <view class="btns_con">
          <view style="flex: 1"></view>
          <button class="zbbm" @click="isShowjoinLeague = false">取消</button>
          <button class="submit" @click="submitTemCode">确认填写</button>
        </view>
      </view>
    </view>
  </u-popup>
  <!--提交订单号弹窗-->
  <u-popup :show="isShowOrderNum" mode="bottom" round="32" @close="isShowOrderNum = false" :safe-area-inset-bottom="false" bg-color="#ffffff" :customStyle="{with: '100%',height: '480rpx'}">
    <view class="order_num_pop">
      <view class="order_pop_boxs">
        <view class="order_num_title">
          <view class="title_text">提交订单号</view>
          <image @click="isShowOrderNum = false" :src="BaseImgUrl + '/me/close_icon.png'" mode="widthFix" style="width: 44rpx;height: 44rpx;"></image>
        </view>
        <view class="order_pop_content">
          <view class="save_order_no">
            <view style="border: 1rpx solid #EAEAEA;border-radius: 16rpx;overflow: hidden;height: 70rpx;line-height: 70rpx; padding-bottom: 14rpx;">
              <u-input v-model="orderNoVal"
                       border="none"
                       :customStyle="{fontSize: '26rpx',background:'#FCFCFC',padding:'8rpx 10rpx ',color: '#333333',border:'none'}"
                       placeholder="请输入正确的订单号"
                       type="text">
                <template #prefix>
                  <view style="display: flex;align-items: center;">
                    <!--<image :src="BaseImgUrl + '/order_btn.png'" style="width: 38rpx;height: 38rpx"></image>-->
                    <view style="color: black;font-size: 26rpx;margin-left: 6rpx;font-weight: bold;">
                      订单号 :
                    </view>
                  </view>
                </template>
                <template #suffix>
                  <view @click="orderNoCopy(orderNoItem.shop.type)" class="choice_right">去复制</view>
                </template>
              </u-input>
            </view>
            <view class="order_tip">注意：请到对应平台复制订单号，粘贴或输入到此处</view>
          </view>
        </view>
        <view @tap="submitOrderNum(orderNoItem)" class="order_btn">提交单号</view>
      </view>
    </view>
  </u-popup>
</template>
<style>
page {
  height: 100%;
  background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
:deep(.u-count-down__text) {
  font-size: 24rpx;
  color: #FF4D1E !important;
}
.me_box{
  height: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 26rpx;
  .top_box_bg{
    width: 100%;
    height: 810rpx;
    background: linear-gradient( 179deg, #FEF6EE 0%, rgba(255,255,255,0) 100%);
  }
  .top_box_content{
    width: 100%;
    height: 300rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .header_box{
    width: 100%;
    z-index: 100;
  }

  .top_content {
    height: 88rpx;
    color: white;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-weight: bold;
    font-size: 36rpx;
    display: flex;
    justify-content: space-between;
    .top_content_logo{
      width: 210rpx;
      padding-left: 30rpx;
    }
    .top_content_right{
      width: 130rpx;
      /* #ifdef APP-PLUS*/
      padding-right: 50rpx;
      /* #endif */
      /* #ifdef H5*/
      padding-right: 0;
      /* #endif */
      /* #ifdef MP */
      padding-right: 20rpx;
      /* #endif */

      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .me_msg{
        width: 40rpx;
        height: 30rpx;
        position: absolute;
        /* #ifdef APP-PLUS || H5 */
        right: 30rpx;
        /* #endif */
        /* #ifdef MP */
        right: 0rpx;
        /* #endif */
        top: 8rpx;
        z-index: 1;
        .tixing {
          width: 10rpx;
          height: 10rpx;
          border-radius: 200rpx;
          background-color: #F00;
          position: absolute;
          right: 10rpx;
          bottom: 0;
        }
        .tixing_box{
          width: 40rpx;
          height: 28rpx;
          line-height: 28rpx;
          text-align: center;
          font-size: 22rpx;
          color: #FFFFFF;
          background: #FA4F4C;
          border-radius: 50rpx;
          position: absolute;
          right: -8rpx ;
          top: -10rpx;
          // animation: fadeInOut 5s infinite;
        }
        @keyframes fadeInOut {
          30%, 70% { opacity: 1; } /* 完全透明 */
          50% { opacity: 0; } /* 完全不透明 */
        }
      }
    }
  }
  .icon_content {
    display:flex;
    z-index: 100;
    // margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    position: relative;
    .header_img{
      width: 98rpx;
      height: 98rpx;
      border-radius: 200rpx;
      border: 6rpx solid #FFFFFF;
      vertical-align: bottom;
    }

    .username_box {
      font-size: 32rpx;
      color: #333333;
      margin-left: 19rpx;
    }
    .username {
      font-weight: bold;
      display: flex;
      align-items: center;
      color: #333333;
    }
    .nickname {
      max-width: 338rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #333333;
    }
    .join_num{
      font-size: 20rpx;
      color: #AC680B;
      margin-left: 10rpx;
      padding: 4rpx 16rpx;
      background: linear-gradient( 270deg, #FFE8CC 0%, #FFE6C7 100%);
      border-radius: 8rpx;
    }

    .username_box .phone {
      font-size: 28rpx;
      margin-top: 10rpx;
      color: #333333;
    }

    .my_info_box {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
    }

    .Set_box {
      display: flex;
      align-items: center;
      color: #333;
      margin-right: 10rpx;
      z-index: 99;
      view {
        margin: 0 0 0 20rpx;
      }
    }
  }
  /* 浮动窗阴影盒子css */
  .shadow_box{
    width: 100%;
    height: 2rpx;
    position: absolute;
    bottom: 0;
    box-shadow: 4rpx 0 15rpx 0 rgba(0,0,0,0.3)
  }
  .top_wrap{
    padding: 20rpx 20rpx 0;
    margin-bottom: 20rpx;
    .top_wrap_content{
      // height: 472rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding-bottom: 4rpx;
      .top_wrap_title{
        height: 120rpx;
        padding-left: 30rpx;
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        .top_wrap_title_text{
          font-size: 28rpx;
          color: #3D3D3D;
          font-weight: bold;
        }
        .top_wrap_title_sub{
          font-size: 24rpx;
          color: #999999;
          margin-left: 30rpx;
          display: flex;
          align-items: center;

        }
        .top_wrap_level{
          width: 470rpx;
          position: absolute;
          right: 0;
          top: -20rpx;
          display: flex;
          .level_sjx{
            width: 0;
            height: 0;
            border-left: 18rpx solid transparent;
            border-right: 0 solid transparent;
            border-bottom-width: 20rpx;
            border-bottom-style: solid;

          }
          .level_content{
            width: 100%;
            height: 130rpx;
            padding: 10rpx 10rpx 10rpx 20rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient( 180deg, #E2E2E1 0%, #F6F6F6 99%);
            border-radius: 0rpx 16rpx 0rpx 16rpx;
            .level_content_left{
              width: calc(100% - 120rpx);
              .level_content_left_title{
                display: flex;
                align-items: center;
                padding-bottom: 10rpx;
                .level_content_left_title_text{
                  padding-top: 8rpx;
                  padding-left: 10rpx;
                  font-size: 26rpx;
                  color: #333333;
                }
              }
              .level_content_progress{
                width: 100%;
                height: 12rpx;
                background: #FFFFFF;
                border-radius: 30rpx;
                margin-bottom: 10rpx;
                .progress_active{
                  height: 12rpx;
                  border-radius: 30rpx;
                }
              }
              .level_content_desc{
                font-size: 22rpx;
                color: #666666;
                text-align: left;
              }
            }
            .level_content_right{
              width: 110rpx;
              height: 44rpx;
              line-height: 44rpx;
              text-align: center;
              font-size: 24rpx;
              border-radius: 30rpx;
            }
          }
        }
      }
      .top_wrap_content_money{
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        .wrap_content_money_left{
          width: 55%;
          text-align: center;
          padding-right: 30rpx;
          .wrap_content_money_left_t{
            display: flex;
            align-items: center;
            justify-content: left;
            font-size: 28rpx;
            color: #3D3D3D;
            line-height: 40rpx;
            margin-bottom: 30rpx;
          }
          .wrap_content_money_left_m{
            display: flex;
            justify-content: space-between;
            .wrap_content_money_left_m_money{
              font-size: 36rpx;
              color: #FF7800;
              line-height: 50rpx;
              text-align: left;
            }
            .wrap_content_money_left_m_btn{
              width: 100rpx;
              height: 50rpx;
              line-height: 50rpx;
              font-size: 26rpx;
              color: #FF7800;
              border: 2rpx solid #FFB36F;
              background: #FFFFFF;
              border-radius: 30rpx;
            }
          }
        }
        .wrap_content_money_right{
          width: 42%;
          text-align: center;
          .wrap_content_money_right_t{
            font-size: 28rpx;
            color: #3D3D3D;
            line-height: 40rpx;
            margin-bottom: 30rpx;
          }
          .wrap_content_money_right_m{
            .wrap_content_money_right_m_money{
              font-size: 32rpx;
              color: #3D3D3D;
              line-height: 50rpx;
            }
          }
        }
        .wrap_content_money_line{
          flex: 1;
          padding: 0 6rpx;
        }
      }
      .top_wrap_content_line{
        padding: 20rpx 30rpx;
      }
      .top_wrap_content_group{
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .wrap_content_group_item{
          text-align: left;
          .group_left_title{
            display: flex;
            align-items: center;
            padding-bottom: 10rpx;
            .group_left_title_text{
              font-size: 26rpx;
              color: #888888;
              line-height: 36rpx;
            }
          }
        }
      }
      .top_wrap_content_foot{
        height: 80rpx;
        margin: 0 4rpx 2rpx;
        background: #FFFCF1;
        border-radius: 0rpx 0rpx 24rpx 24rpx;
        display: flex;
        justify-content: space-between;
        .wrap_content_foot_item{
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          .wrap_content_foot_img{
            width: 52rpx;
            height: 52rpx;
          }
          .wrap_content_foot_text{
            font-size: 26rpx;
            color: #3D3D3D;
            line-height: 36rpx;
          }
        }
      }
    }
  }
}
.me_content{
  width: 100%;
  height: calc(100% - 300rpx);
  position: absolute;
  left: 0;
  right: 0;
}
/* 红包倒计时提示 */
.red_packet_expire_tip{
  padding: 0 20rpx;
  margin-bottom: 20rpx ;
  .red_packet_expire_tip_content{
    height: 96rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 24rpx;
    .red_packet_expire_tip_img{
      width: 80rpx;
      height: 80rpx;
      position: relative;
      .red_packet_expire_tip_img_text{
        color: #F83123;
        position: absolute;
        top: 10rpx;
        left: 0;
        right: 0;
        z-index: 1;
        text-align: center;
      }
    }
    .red_packet_expire_tip_text{
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #3D3D3D;
      padding-left: 10rpx;
    }
    .red_packet_expire_tip_btn{
      width: 100rpx;
      height: 44rpx;
      font-size: 24rpx;
      color: #FFFFFF;
      line-height: 44rpx;
      text-align: center;
      background: linear-gradient( 270deg, #FF5429 0%, #FF7F14 100%);
      border-radius: 30rpx;
    }
  }
}
/* 中间导航css */
.me_nav{
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  .me_nav_content{
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    .me_nav_tabBox{
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      padding-bottom: 20rpx;
    }
    .nav_item{
      width: 20%;
      text-align: center;
      display: inline-block;
      .nav_item_text{
        font-size: 24rpx;
        color: #3D3D3D;
        height: 36rpx;
        line-height: 36rpx;
      }
    }
    .nav_item:last-child{
      padding-right: 0;
    }
    .me_nav_swiper{
      height: 166rpx;
      background: #F8F8F8;
      border-radius: 24rpx;
      position: relative;
      .page_num{
        width: 72rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        background: #FFEED4;
        border-radius: 0 24rpx 0 24rpx;
        .page_num_text{
          font-size: 24rpx;
          color: #FF5429;
        }
      }
      .me_nav_swiper_box{
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        position: relative;
        .swiper_img{
          width: 88rpx;
          height: 100rpx;
          position: relative;
          .swiper_img_content{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
            text-align: center;
            .swiper_img_text{
              padding: 14rpx 0;
              color: #FA642B;
              font-size: 24rpx;
            }
            .swiper_img_desc{
              font-size: 18rpx;
              color: #FFF1B8;
            }
          }
        }
        .swiper_content{
          flex: 1;
          padding-left: 10rpx;
          .swiper_content_title{
            display: flex;
            align-items: center;
            padding-bottom: 10rpx;
            .swiper_content_title_t{
              font-size: 28rpx;
              color: #3D3D3D;
              line-height: 28rpx;
            }
            .swiper_count_down{
              padding-left: 20rpx;
              font-size: 26rpx;
              line-height: 24rpx;
            }
          }
          .swiper_content_desc{
            font-size: 24rpx;
            color: #888888;
            line-height: 28rpx;
            padding-bottom: 10rpx;
          }
          .swiper_steps{
            width: 100%;
            height: 60rpx;
            position: relative;
            padding-top: 8rpx;
            .swiper_steps_line{
              width: 100%;
              display: flex;
              justify-content: space-between;
              .swiper_steps_line_box{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .swiper_steps_line_item{
                  height: 2rpx;
                  .swiper_steps_line_warp{
                    display: flex;
                    align-items: center;
                  }
                }
              }
              .swiper_steps_left_line{
                width: 40rpx;
                height: 2rpx;
              }
              .swiper_steps_right_line{
                width: 40rpx;
                height: 2rpx;
              }
            }
            .steps_scroll_box{
              width: 100%;
              height: 100%;
              padding: 0;
              margin-top: -10rpx;
              display: flex;
              justify-content: space-between;
              .swiper_steps_item{
                height: 100%;
                position: relative;
                text-align: center;
                .swiper_steps_item_round{
                  width: 16rpx;
                  height: 16rpx;
                  border-radius: 50%;
                  background: #DEDEDE;
                  border: 2rpx solid #FFFFFF;
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  z-index: 1;
                  margin: 0 auto;
                }
                .swiper_steps_item_roundActive{
                  background: #FF7F14 !important;
                }
                .swiper_steps_item_line{
                  width: 100%;
                  height: 2rpx;
                  background: #DEDEDE;
                  position: absolute;
                  top: 8rpx;
                }
                .swiper_steps_item_text{
                  width: 100%;
                  font-size: 20rpx;
                  color: #666666;
                  line-height: 34rpx;
                  text-align: center;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  right: 0;
                }
              }
              /* .swiper_steps_item:first-child{
                .swiper_steps_item_text{
                  left: calc(-50% + 10rpx);
                }
              }
              .swiper_steps_item:last-child{
                .swiper_steps_item_text{
                  left: calc(25% + 10rpx);
                }
              } */
              .swiper_steps_item_last{
                width: 80rpx;
                height: 100%;
                position: absolute;
                right: -28rpx;
                top: 0;
                text-align: center;
                .swiper_steps_item_round{
                  width: 16rpx;
                  height: 16rpx;
                  border-radius: 50%;
                  background: #DEDEDE;
                  border: 2rpx solid #FFFFFF;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                .swiper_steps_item_roundActive{
                  background: #FF7F14 !important;
                }
                .swiper_steps_item_line{
                  height: 2rpx;
                  background: #DEDEDE;
                  position: absolute;
                  top: 8rpx;
                }
                .swiper_steps_item_text{
                  width: 100%;
                  font-size: 20rpx;
                  color: #666666;
                  line-height: 34rpx;
                  text-align: center;
                  position: absolute;
                  bottom: 0;
                  left: calc(-50% + 10rpx);
                }
              }
            }


          }
        }
      }
    }
  }
}
/* 我的订单css */
.me_order{
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  .me_order_content{
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    .me_order_title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .me_order_title_text{
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 40rpx;
      }
      .me_order_title_more{
        font-size: 24rpx;
        line-height: 40rpx;
        color: #999999;
        display: flex;
        align-items: center;
      }
    }
    .me_order_list{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10rpx;
      padding-bottom: 20rpx;
      .me_order_item{
        text-align: center;
        position: relative;
        /* .me_order_item_img{
          width: 40rpx;
          height: 40rpx;
        } */
        .me_order_item_text{
          font-size: 26rpx;
          color: #3D3D3D;
          line-height: 36rpx;
        }
        .me_order_item_num{
          padding: 2rpx 10rpx;
          font-size: 22rpx;
          color: #FFFFFF;
          background: #FA4F4C;
          border-radius: 50rpx;
          position: absolute;
          right: 0;
          top: -10rpx;
        }
      }
    }
    /* order_swiper css */
    .order_swiper{
      height: 90rpx;
      background: #F8F8F8;
      border-radius: 16rpx;
      padding: 20rpx;
      .order_swiper_item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .order_swiper_left{
          flex: 1;
          display: flex;
          align-items: center;
          .order_swiper_img{
            width: 88rpx;
            height: 88rpx;
            border-radius: 8rpx;
            overflow: hidden;
          }
          .order_swiper_item_content{
            padding-left: 10rpx;
            .order_swiper_item_title{
              font-size: 24rpx;
              color: #3D3D3D;
              padding-bottom: 10rpx;
            }
            .order_count_down{
              display: flex;
              align-items: center;
              font-size: 24rpx;
              color: #666666;
            }
          }
        }
        .order_swiper_right_box{
          display: flex;
          align-items: center;
        }
        .order_swiper_right{
          width: 128rpx;
          height: 52rpx;
          line-height: 52rpx;
          text-align: center;
          font-size: 26rpx;
          color: #FFFFFF;
          background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
          border-radius: 30rpx;
        }
      }
    }
  }
}
/* 邀请用户下单得奖励 */
.me_invite{
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  .me_invite_content{
    position: relative;
    border-radius: 24rpx;
    .me_invite_bg{
      width: 100%;
      height: 180rpx;
    }
    .me_invite_title{
      height: 48rpx;
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      z-index: 1;
    }
    .me_invite_img{
      width: 120rpx;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
    }
    .me_invite_btn{
      width: 180rpx;
      height: 60rpx;
      padding: 10rpx;
      position: absolute;
      left: 120rpx;
      bottom: 20rpx;
      background: rgba(255,255,255,0.5);
      border-radius: 50rpx;
      .me_invite_btn_text{
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 30rpx;
        color: #444444;
        background: linear-gradient( 270deg, #CFFC5D 0%, #FFEE82 100%);
        border-radius: 50rpx;
      }
    }
  }
}
/* 我的服务css */
.middle_content {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  .middle_price {
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 24rpx;

    .small_box {
      position: relative;
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }

    .small_box:nth-child(1)::before,
    .small_box:nth-child(2)::before {
      content: '';
      position: absolute;
      right: -63rpx;
      top: 21rpx;
      width: 2rpx;
      height: 62rpx;
      background-color: #EBECF0;
    }

    .small_box .price {
      font-size: 36rpx;
      color: #F97632;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
  }

  .middle_banner {
    width: 100%;
    height: 180rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    border-radius: 24rpx;
    position: relative;
  }
}

.bottom_list {
  padding: 20rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 20rpx;
  .title {
    font-size: 30rpx;
    line-height: 42rpx;
    color: #3D3D3D;
    font-weight: bold;
    padding-bottom: 20rpx;
  }
}


.message {
  color: #ccc;
  font-size: 20rpx;
  text-align: center;
  margin-top: 50rpx;
}



.username image {
  width: 38rpx;
  height: 38rpx;
  margin-right: 6rpx;
}

.username .vip_con {
  text-align: center;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 100px;
  padding: 3px 8px;
  font-size: 12px;
  margin-left: 6px;
  display: flex;
  flex: 1;
  align-items: center;
}


.user_top {
  position: absolute;
  z-index: 100;
  width: 690rpx;
  height: 180rpx;
  bottom: 0;
  right: 30rpx;
  padding-top: 20rpx
}

.user_top_bg {
  position: absolute;
  z-index: 100;
  width: 690rpx;
  height: 168rpx;
  bottom: 0;
}

.user_top_money_content {
  z-index: 100;
  display: flex;
  align-items: center;
  margin-top: 10rpx;

  .user_top_money_bg {
    width: 80rpx;
    z-index: 99;
    height: 80rpx;
    margin: 20rpx
  }
}

.user_top_money_text {
  z-index: 99;
  margin-top: 20rpx;
  font-size: 32rpx;
}

.open_vip {
  color: white;
  text-align: center;
  z-index: 99;
  padding: 10rpx 10rpx;
  font-size: 28rpx;
  margin-right: 30rpx;
  height: 38rpx;
  line-height: 38rpx;
  width: 160rpx;
  background: linear-gradient(81deg, #FD794B 0%, #FE9E54 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.8);
}

/* 绑定手机弹窗提示css */
.bind_phone_box {
  width: 100%;
  height: 100%;
  position: relative;
  .bind_phone_bg {
    width: 100%;
  }
  .bind_phone_content{
    padding: 38rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    .title{
      width: 60%;
      height: 180rpx;
      text-align: left;
      margin-bottom: 40rpx;
      font-size: 48rpx;
      color: #FFFFFF;
      line-height: 76rpx;
      font-weight: bold;
    }
    .bind_phone_icon{
      width: 199rpx;
      height: 199rpx;
      margin: 0 auto 20rpx;
    }
    .bind_phone_text{
      text-align: center;
      font-size: 28rpx;
      color: #3D3D3D;
      margin-bottom: 20rpx;
    }
    .bind_phone_btn{
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      background: linear-gradient( 180deg, #FCCB45 0%, #FB8631 90%);
      border-radius: 50rpx;
      color: #FFFFFF;

    }
    .bind_phone_btn:after{
      border: none;
    }
  }

  .close{
    width:36rpx;
    height:36rpx;
    text-align: center;
    border-radius: 50%;
    border: 2rpx solid rgba(255, 255, 255, 0.4);
    position: absolute;
    bottom: -100rpx;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 10rpx;
    background: rgba(255, 255, 255, 0.1);
  }
}
/* 填写邀请码弹窗css */
.join_league_box{
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
  border-radius: 30rpx;
  .content_boxs {
    width: 650rpx;
    height: 450rpx;
    box-sizing: border-box;
    position: relative;

    .know_t {
      font-size: 32rpx;
      color: #000;
      text-align: center;
      box-sizing: border-box;
      padding: 20rpx;
      border-bottom: 1px solid #eee;
    }

    .btns_box {
      width: 280rpx;
      height: 64rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #fff;
      line-height: 64rpx;
      text-align: center;
    }
  }
  .btns_con {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    margin: 20rpx 30rpx 30rpx;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 200rpx;
      width: 176rpx;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }

    .submit {
      border-radius: 200rpx;
      width: 176rpx;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
  }
}
/* 复制订单号弹窗css */
.order_num_pop{
  padding: 30rpx;
  .order_pop_boxs{
    padding-bottom: 40rpx;
  }
  .order_num_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    line-height: 80rpx;

    .title_text{
      width: 100%;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
  }
  .order_pop_content{
    position: relative;
    padding: 20rpx 0 40rpx;
    .save_order_no {
      padding: 10rpx 0;
      font-size: 26rpx;
      .choice_right{
        width: 88rpx;
        height: 52rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 52rpx;
        text-align: center;
        background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
        border-radius: 12rpx;
      }
    }
    .order_tip{
      color: #888888;
      font-size: 24rpx;
      line-height: 34rpx;
      text-align: left;
      padding: 20rpx 0;
    }
  }
  .order_btn{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #FFFFFF;
    font-size: 32rpx;
    text-align: center;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    border-radius: 200rpx;
  }
}
</style>
